<!--显示设备-->
<template>
  <div id="table">

    <el-dialog title="设备修改" :visible.sync="dialogFormVisible">
      <el-form :model="form">

        <el-form-item label="设备名称" prop="name" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="设备地址" prop="address" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="设备经度" prop="lat" :label-width="formLabelWidth">
          <el-input v-model="form.lat" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="设备纬度" prop="lng" :label-width="formLabelWidth">
          <el-input v-model="form.lng" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="dtu编号" prop="dtuid" :label-width="formLabelWidth">
          <el-input v-model="form.dtuid" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="设备状态" prop="state" :label-width="formLabelWidth">
          <el-switch
              v-model="form.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="在线"
              inactive-value="离线">
          </el-switch>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </div>

    </el-dialog>

    <el-autocomplete
      class="inline-input"
      id="search"
      v-model="state2"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      :trigger-on-focus="false"
      @change="handleSelect"
      @select="handleSelect"
    ></el-autocomplete>
   
    <el-table
      :data="pagination"
      style="width: 100%"
      v-if = "!state2"
      @row-click="update"
      >
      <el-table-column
        prop="id"
        label="设备编号"
        width="130"
        sortable
        column-key="id"
        >
      </el-table-column>
      <el-table-column
        prop="name"
        label="设备名称"
        width="130"
        sortable
        column-key="name"
        >
      </el-table-column>
      <el-table-column
        prop="address"
        label="设备地址"
        sortable
        width="250"
        >
      </el-table-column>
      <el-table-column
        prop="lat"
        sortable
        label="经度">
      </el-table-column>
      <el-table-column
        prop="lng"
        sortable
        label="纬度">
      </el-table-column>
      <el-table-column
        prop="dtuid"
        sortable
        label="dtu编号">
      </el-table-column>
      <el-table-column
        prop="state"
        sortable
        label="设备状态">

      </el-table-column>

      
      <el-table-column>
        <el-button type="primary" icon="el-icon-edit" circle
          @click="update"
        ></el-button>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="totalItems"
        v-if="!state2"
        >
      </el-pagination>

    <el-table
      v-else
      :data="pagination"
      style="width: 100%"
      @row-click="update">
      <el-table-column
        prop="id"
        label="设备编号"
        width="130"
        sortable
        column-key="id"
        >
      </el-table-column>
      <el-table-column
        prop="name"
        label="设备名称"
        width="130"
        sortable
        column-key="name"
        >
      </el-table-column>
      <el-table-column
        prop="address"
        label="设备地址"
        sortable
        width="250"
        >
      </el-table-column>
      <el-table-column
        prop="lat"
        sortable
        label="经度">
      </el-table-column>
      <el-table-column
        prop="lng"
        sortable
        label="纬度">
      </el-table-column>
      <el-table-column
        prop="dtuid"
        sortable
        label="dtu编号">
      </el-table-column>
      <el-table-column
        prop="state"
        sortable
        label="设备状态">
      </el-table-column>
      <el-table-column>
        <el-button type="primary" icon="el-icon-edit" circle
          @click="update"
        ></el-button>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleNewSizeChange" @current-change="handleNewCurrentChange" :current-page="currenNewPage"
        :page-sizes="pageNewSizes" :page-size="pageNewSize" layout="total, sizes, prev, pager, next, jumper"
        :total="totalNewItems"
        v-if="state2"
        >
      </el-pagination>

  </div>
  
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return{
      value: true,
      searchtable: [],
      pagination: [],
      currentPage: 1,
      // 分页的分界线
      start: 0,
      end: 10,
      pageSize: 6, // 每页显示的条目数量
      totalItems: 0, // 数据库中条目数量
      pageSizes: [6, 8, 10, 20] ,// 每页显示条目数量的选项

      currentNewPage: 1,
      // 分页的分界线
      Newstart: 0,
      Newend: 10,
      pageNewSizes: [6, 8, 10, 20],
      pageNewSize: 6,
      totalNewItems:0,

      restaurants: [],
      state2: '',
      tableData: [],
        dialogFormVisible: false,
        form: {
          id: 0,
          name: '',
          address: '',
          lat:0,
          lng: 0,
          dtuid: 0,
          state:'离线'
        },
        formLabelWidth: '120px'
    }
  },
  methods:{
    handleSelect()
    {
      this.searchtable = this.tableData.filter(item => {
            return String(item.id) === this.state2
        })
      if(this.state2 == '')
        this.searchtable = this.tableData
      this.searchpage()
    },
    update(row)
    {
      this.form.id = row.id
      this.form.name = row.name
      this.form.address = row.address
      this.form.lat = row.lat
      this.form.lng = row.lng
      this.form.dtuid = row.dtuid
      this.form.state = row.state
      this.dialogFormVisible = true
    },
    filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
    
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll()
      {
        return [
        
        ]
      },
      fetchData () {
      this.start = (this.currentPage - 1) * this.pageSize
      this.end = this.start + this.pageSize
      this.pagination = this.tableData.slice(this.start, this.end)
      this.totalItems = this.tableData.length;
      this.totalNewItems = this.tableData.length;
  
    },
    searchpage(){
      this.Newstart = (this.currentNewPage - 1) * this.pageNewSize
      this.Newend = this.Newstart + this.pageNewSize
      this.pagination = this.searchtable.slice(this.Newstart, this.Newend)
      this.totalNewItems = this.searchtable.length;
    },
    handleSizeChange (newSize) {
      this.pageSize = newSize
      this.fetchData() // 更新每页显示的条目数量后重新请求数据
    },
    handleCurrentChange (newPage) {
      this.currentPage = newPage
      this.fetchData() // 更新当前页数后重新请求数据
    },
    handleNewSizeChange (newSize) {
      this.pageNewSize = newSize
      this.searchpage() // 更新每页显示的条目数量后重新请求数据
    },
    handleNewCurrentChange (newPage) {
      this.currentNewPage = newPage
      this.searchpage() // 更新当前页数后重新请求数据
    },
    async sure()
    {
      if(this.form.state == '离线')
        this.form.state = 0
      else
        this.form.state = 1
        let user = JSON.parse(localStorage.getItem("honey-user") || '{}')
        const config = {
          headers: {
              // 设置内容类型为JSON
              'Content-Type': 'application/json;charset=UTF-8',
              // 添加token到请求头
              'token': user.token || '',
          }
      }
        //this.$request.post('/updatedevice',this.form).then(res => {
      const res = await axios.post('http://127.0.0.1:8000/updatedevice',this.form,config)
      console.log(res)
      this.dialogFormVisible = false
      //this.$request.get('/device').then(res1 => {
      const res1 = await axios.get('http://127.0.0.1:8000/device',config)
      this.tableData = res1.data.data
      for(var i = 0;i < this.tableData.length; i++)
      {
      if(this.tableData[i].state == 0)
        this.tableData[i].state = '离线'
      else
        this.tableData[i].state = '在线'
      }
        this.fetchData()
   // })
        //})
    }
  },
  mounted() {
      this.restaurants = this.loadAll();
    },
  async created(){
      let user = JSON.parse(localStorage.getItem("honey-user") || '{}')
      const config = {
          headers: {
              // 设置内容类型为JSON
              'Content-Type': 'application/json;charset=UTF-8',
              // 添加token到请求头
              'token': user.token || '',
          }
      }
      //this.$request.get('/device').then(res => {
      const res = await axios.get('http://127.0.0.1:8000/device',config);
      this.tableData = res.data.data
      for(var i = 0;i < this.tableData.length; i++)
      {
        if(this.tableData[i].state == 0)
          this.tableData[i].state = '离线'
        else
          this.tableData[i].state = '在线'
      }
      this.fetchData()
      if(res.data.code == '401')
          this.$router.push('/')
  }
}
</script>

<style>
  #search{
    width: 600px;
    position: fixed;
    left: auto;
    top: 80px;
  }
  #table{
    line-height: 50px;
  }
  #searchicon{
    position: fixed;
    left: 1300px;
    top: 80px;
  }
</style>